<template>
  <div class="list-manager">
    <h2>任务列表管理</h2>

    <!-- 添加新任务 -->
    <div class="add-task">
      <input
        v-model="newTask"
        @keyup.enter="addTask"
        placeholder="输入新任务，按 Enter 添加"
        class="task-input"
      />
      <button @click="addTask" :disabled="!newTask.trim()">添加</button>
    </div>

    <!-- 筛选选项 -->
    <div class="filters">
      <label>
        <input type="radio" v-model="filter" value="all" />
        全部
      </label>
      <label>
        <input type="radio" v-model="filter" value="active" />
        进行中
      </label>
      <label>
        <input type="radio" v-model="filter" value="completed" />
        已完成
      </label>
    </div>

    <!-- 任务列表 -->
    <div class="task-list">
      <div
        v-for="task in filteredTasks"
        :key="task.id"
        class="task-item"
        :class="{ completed: task.completed }"
      >
        <input type="checkbox" v-model="task.completed" @change="updateTask(task)" />
        <span v-if="!task.editing" @dblclick="startEdit(task)" class="task-text">
          {{ task.text }}
        </span>
        <input
          v-else
          v-model="task.text"
          @blur="finishEdit(task)"
          @keyup.enter="finishEdit(task)"
          @keyup.esc="cancelEdit(task)"
          class="edit-input"
          ref="editInput"
        />
        <button @click="deleteTask(task.id)" class="delete-btn">删除</button>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats">
      <p>总计: {{ tasks.length }} 个任务</p>
      <p>进行中: {{ activeCount }} 个</p>
      <p>已完成: {{ completedCount }} 个</p>
    </div>

    <!-- 批量操作 -->
    <div class="batch-actions">
      <button @click="clearCompleted" :disabled="completedCount === 0">清除已完成</button>
      <button @click="toggleAll" :disabled="tasks.length === 0">
        {{ allCompleted ? '取消全选' : '全选' }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'

interface Task {
  id: number
  text: string
  completed: boolean
  editing: boolean
}

const tasks = ref([
  { id: 1, text: '学习 Vue3', completed: false, editing: false },
  { id: 2, text: '写代码', completed: true, editing: false },
  { id: 3, text: '看文档', completed: false, editing: false },
])

const newTask = ref('')
const filter = ref('all')

const filteredTasks = computed(() => {
  switch (filter.value) {
    case 'active':
      return tasks.value.filter((task) => !task.completed)
    case 'completed':
      return tasks.value.filter((task) => task.completed)
    default:
      return tasks.value
  }
})

const activeCount = computed(() => {
  return tasks.value.filter((task) => !task.completed).length
})

const completedCount = computed(() => {
  return tasks.value.filter((task) => task.completed).length
})

const allCompleted = computed(() => {
  return tasks.value.length > 0 && tasks.value.every((task) => task.completed)
})

const addTask = () => {
  const text = newTask.value.trim()
  if (text) {
    tasks.value.push({
      id: Date.now(),
      text,
      completed: false,
      editing: false,
    })
    newTask.value = ''
  }
}

const deleteTask = (id: number) => {
  const index = tasks.value.findIndex((task) => task.id === id)
  if (index > -1) {
    tasks.value.splice(index, 1)
  }
}

const updateTask = (task: Task) => {
  console.log('任务更新:', task)
}

const startEdit = (task: Task) => {
  task.editing = true
  nextTick(() => {
    const input = document.querySelector('.edit-input') as HTMLInputElement
    input?.focus()
  })
}

const finishEdit = (task: Task) => {
  task.editing = false
  if (!task.text.trim()) {
    deleteTask(task.id)
  }
}

const cancelEdit = (task: Task) => {
  task.editing = false
  // 可以在这里恢复原始文本
}

const clearCompleted = () => {
  tasks.value = tasks.value.filter((task) => !task.completed)
}

const toggleAll = () => {
  const newStatus = !allCompleted.value
  tasks.value.forEach((task) => {
    task.completed = newStatus
  })
}
</script>

<style scoped>
.list-manager {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.add-task {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.task-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-task button {
  padding: 10px 20px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-task button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.filters {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.filters label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.task-list {
  margin-bottom: 20px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.task-item.completed .task-text {
  text-decoration: line-through;
  color: #6c757d;
}

.task-text {
  flex: 1;
  cursor: pointer;
}

.edit-input {
  flex: 1;
  padding: 5px;
  border: 1px solid #007bff;
  border-radius: 4px;
}

.delete-btn {
  padding: 5px 10px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 4px;
}

.stats p {
  margin: 0;
  font-weight: bold;
}

.batch-actions {
  display: flex;
  gap: 10px;
}

.batch-actions button {
  flex: 1;
  padding: 10px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.batch-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>
